window.addEventListener('load', function() {
    // 方法镜效果
    (function() {
        var preview_img = this.document.querySelector('.preview_img');
        var min_img = preview_img.children[0];
        var mask = preview_img.children[1];
        var big = preview_img.children[2];
        var max_img = this.document.querySelector('.bigImg');
        // 鼠标经过事件
        preview_img.addEventListener('mouseover', function() {
            big.style.display = 'block';
            this.style.cursor = 'move';
            mask.style.display = 'block';
            // 鼠标移动事件
            preview_img.addEventListener('mousemove', function(e) {
                // 先算出鼠标在照片上的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
                // 遮挡层的最大移动距离
                var maskMax = this.offsetWidth - mask.offsetWidth;
                if (x > min_img.offsetWidth) { //如果鼠标离开了小照片的位置
                    big.style.display = 'none';
                    this.style.cursor = '';
                    mask.style.display = 'none';
                } else {
                    if (maskX <= 0) { //如果mask的x坐标小于等于0
                        maskX = 0;
                    } else if (maskX >= maskMax) { //如果mask的x坐标大于等于mask能移动的最大距离
                        maskX = maskMax;
                    }
                    if (maskY <= 0) { //如果mask的y坐标小于等于0
                        maskY = 0;
                    } else if (maskY >= maskMax) { //如果mask的y坐标大于等于mask能移动的最大距离
                        maskY = maskMax;
                    }
                    mask.style.left = maskX + 'px';
                    mask.style.top = maskY + 'px';
                }
                // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
                // 大图片最大移动距离
                var bigMax = max_img.offsetWidth - big.offsetWidth;
                // 大图片的移动距离 X Y
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 因为大图片移动的方向与遮罩层移动的方向是反的，所以用负数
                max_img.style.left = -bigX + 'px';
                max_img.style.top = -bigY + 'px';
            })

            // 鼠标离开事件
            preview_img.addEventListener('mouseout', function() {
                big.style.display = 'none';
                this.style.cursor = '';
                mask.style.display = 'none';
            })
        })
    }());

    // aside区域
    (function() {
        var tab_list_ul = this.document.querySelector('.tab_list_ul');
        var lis = tab_list_ul.children;
        var tab_cons = this.document.querySelectorAll('.tab_con');
        for (var i = 0; i < lis.length; i++) {
            // 利用setAttribute()自定义属性方法，添加index属性并赋值，用于标识每一个li（给每一个li添加了一个索引号）
            lis[i].setAttribute('index', i);
            // 点击事件
            lis[i].addEventListener('click', function() {
                // 排他算法

                for (var i = 0; i < lis.length; i++) {
                    // 先清除所有的 li 和 item
                    lis[i].className = '';
                    tab_cons[i].style.display = 'none';
                }
                // 再留下自己
                this.className = 'current';
                // 利用getAttribute()自定义属性方法，获取当前被点击的li的自定义属性index的属性值
                var index = this.getAttribute('index');
                tab_cons[index].style.display = 'block';
            })
        }
    })();


    // detail区域
    (function() {
        var detail_tab_ul = this.document.querySelector('.detail_tab_ul');
        var lis = detail_tab_ul.children;
        var items = this.document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 利用setAttribute()自定义属性方法，添加index属性并赋值，用于标识每一个li（给每一个li添加了一个索引号）
            lis[i].setAttribute('index', i);
            // 点击事件
            lis[i].addEventListener('click', function() {
                // 排他算法

                for (var i = 0; i < lis.length; i++) {
                    // 先清除所有的 li 和 item
                    lis[i].className = '';
                    items[i].style.display = 'none';
                }
                // 再留下自己
                this.className = 'current';
                // 利用getAttribute()自定义属性方法，获取当前被点击的li的自定义属性index的属性值
                var index = this.getAttribute('index');
                items[index].style.display = 'block';
            })
        }
    }());
})